<template>
	<div>
		<el-timeline>
			<!-- :type="record.btn" -->
			<el-timeline-item  :icon="['iconfont' ,record.icon]"  size="large" color="#ffffff" :timestamp="record.title" placement="bottom"
				v-for="(record,i) in recordList">
				<div>
					<div class="approverInfo">
						<span class="approver">{{record.auditor_name}}</span>
						<span :style="{'color':record.color}">{{record.audit_status_name || '待审批'}}</span>
					</div>
					<div class="approverTime text-xs" v-if="record.update_time!=''">操作时间：{{record.update_time}}</div>
					<div class="opinion" :style="{'color':record.color}" v-if="record.audit_desc">
						<span style="line-height: 26px;">
							<span style="min-width: 80px;">处理意见：</span>
							<span>
								<span v-if="record.audit_desc==''||record.audit_desc==null">暂无</span>
								<span @click="showImg($event)" v-else v-html="record.audit_desc"></span>
							</span>
						</span>
					</div>
				</div>
			</el-timeline-item>
		</el-timeline>
		<el-dialog :visible.sync="dialogImgs" custom-class="dialogImgs"  :modal="false" :fullscreen="true">
			<el-image :src="dialogImageUrl"></el-image>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		name: 'items',
		props: {
			recordList: Array,
		},
		data() {
			return {
				dialogImageUrl:'',
				dialogImgs:false
			}
		},
		methods: {
			// 图片点击放大
			showImg(e) {
				if (e.target.tagName == 'IMG') {
					this.dialogImageUrl = e.target.src;
					this.dialogImgs = true
				}
			},
		}
	}
</script>

<style  lang="less">
	/deep/.el-dialog__wrapper{
		z-index: 2000000!important;
	}
	.opinion{
		img{
			height: 200px!important;
		}
	}
	.el-timeline {
		margin-left: 180px !important;
		font-size: 16px !important;
		margin-top: 20px!important;
	}
	.el-timeline-item__node--large {
		left: -10px !important;
		width: 30px !important;
		height: 30px !important;
	}
	.el-timeline-item__icon {
		font-size: 18px !important;
	}
	.el-timeline-item__timestamp.is-bottom {
		position: absolute !important;
		left: -138px !important;
		top: -2px !important;
		line-height: 24px !important;
		font-size: 16px !important;
		width: 118px!important;
		text-align: right;
		font-weight: bold;
		color: #5c5c5b;
	}
	.el-timeline-item__content {
		padding-top: 7px !important;
		overflow: hidden;
		color: #5c5c5b;
		margin-bottom: 20px;
	}
	.el-timeline .approverInfo .approver{
		display: inline-block;
		min-width: 360px;
	}
	.el-timeline .opinion{
		margin-top: 6px;
		
	}
	.el-timeline .card-style{
		width: 60%;
	}
	.el-timeline .approverTime{
		color: #909399;
		margin-top: 6px;
		
	}
	.el-timeline .el-card__body{
		padding: 10px!important;
	}
	
</style>
